<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>订单发货</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
</head>
<body>
<div id="app">
    <el-button type="primary" @click="printOrder">打印订单</el-button>
    <el-button type="primary" @click="printShipping">打印发货单</el-button>
    <el-table
            ref="Table"
            :data="ordergos"
            @current-change="changeCurrent"
            @select-all="selectAll"
            @selection-change="handleSelectionChange"
            style="width: 100%">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column label="序号">
            <template slot-scope="scope">
                <span >{{ scope.row.id }}</span>
            </template>
        </el-table-column>
        <el-table-column label="订单编号">
            <template slot-scope="scope">
                <span >{{ scope.row.orderId }}</span>
            </template>
        </el-table-column>
        <el-table-column label="订单状态">
            <template slot-scope="scope">
                <span >{{ scope.row.torderStatus.allStatus }}</span>
            </template>
        </el-table-column>
        <el-table-column label="会员名">
            <template slot-scope="scope">
                <span >{{ scope.row.orderHolder }}</span>
            </template>
        </el-table-column>
        <el-table-column label="商品名称">
            <template slot-scope="scope">
                <span >{{ scope.row.product.pname }}</span>
            </template>
        </el-table-column>
        <el-table-column label="商品数量">
            <template slot-scope="scope">
                <span >{{ scope.row.number }}</span>
            </template>
        </el-table-column>
        <el-table-column label="单价">
            <template slot-scope="scope">
                <span >{{ scope.row.money }}</span>
            </template>
        </el-table-column>
        <el-table-column label="总金额">
            <template slot-scope="scope">
                <span >{{ scope.row.heji }}</span>
            </template>
        </el-table-column>
        <el-table-column label="收货人">
            <template slot-scope="scope">
                <span>{{ scope.row.customer.name }}</span>
            </template>
        </el-table-column>
        <el-table-column label="收货地点">
            <template slot-scope="scope">
                <span >{{ scope.row.customer.address }}</span>
            </template>
        </el-table-column>
        <el-table-column label="下单时间">
            <template slot-scope="scope">
                <span >{{ scope.row.product.paddtime }}</span>
            </template>
        </el-table-column>
        <el-table-column label="支付时间">
            <template slot-scope="scope">
                <span >{{ scope.row.product.paddtime }}</span>
            </template>
        </el-table-column>
        <el-table-column label="备注">
            <template slot-scope="scope">
                <span >{{ scope.row.remark}}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="primary"
                        @click="showShipBox(scope.row.orderId)">发货</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
            background
            layout="prev, pager, next"
            @current-change="loadPage"
            :total="total"
            :current-page="current"
            :page-size="pageSize">
    </el-pagination>

      <el-dialog title="发货确认" :visible.sync="dialogFormVisible">
          <el-form :model="shipping">
              <el-form-item label="订单编号" :label-width="formLabelWidth">
                  <el-input v-model="shipping.orderNum" autocomplete="off" ></el-input>
              </el-form-item>
              <el-form-item label="发货单号":label-width="formLabelWidth">
                  <el-input v-model="shipping.shippingNum" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="配送方式" :label-width="formLabelWidth">
                  <el-select v-model="shipping.shippingMethodId" placeholder="请选择" @change="changeLogistic">
                      <el-option v-for="logistic of logistics" :label="logistic.logisticsName" :value="logistic.logisticsId"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="车辆选择" :label-width="formLabelWidth" >
                  <el-select v-model="shipping.shippingTruckId" placeholder="请选择" @change="changeVehicle">
                      <el-option v-for="vehicle of vehicles" :label="vehicle.vehicleName" :value="vehicle.vehicleId"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="发货时间" :label-width="formLabelWidth">
                  <el-date-picker
                      v-model="shipping.shippingDate"
                      type="date"
                      placeholder="选择日期">
              </el-date-picker>
              </el-form-item>
              <el-form-item label="司机姓名">
                  <el-input autocomplete="off" :value="driver.driverName"></el-input>
              </el-form-item>
              <el-form-item label="司机电话">
                  <el-input autocomplete="off" :value="driver.driverControl"></el-input>
              </el-form-item>
              <el-form-item label="车牌号码">
                  <el-input autocomplete="off" :value="numberPlate"></el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="outGoods">确定发货</el-button>
          </div>
      </el-dialog>
    <el-dialog title="订单信息" :visible.sync="printOrderDialog" fullscreen="true" >
        购货人:<span>{{orderHolder}}</span><br>
        付款日期:<span>{{product.paddtime}}</span><br>
        付款时间:<span>{{product.paddtime}}</span> <br>
        发货时间:<span>{{product.paddtime}}</span><br>
        支付方式:<span>{{payType}}</span><br>
        手机:<span>{{customer.telephone}}</span><br>
        收货地址：<span>{{customer.address}}</span><br>
        收货人:<span>{{customer.name}}</span>
        <el-table :data="order">
            <el-table-column property="orderId" label="订单编号" width="150"></el-table-column>
            <el-table-column property="product.pname" label="商品名称" width="200"></el-table-column>
            <el-table-column property="product.cargo.cargoNO" label="货号" width="200"></el-table-column>
            <el-table-column property="money" label="价格" width="200"></el-table-column>
            <el-table-column property="number" label="数量" width="200"></el-table-column>
            <el-table-column property="heji" label="小计" width="200"></el-table-column>
        </el-table>
        <el-button @click="printOrderDialog = false">确定打印</el-button>
    </el-dialog>
    <el-dialog title="发货信息" :visible.sync="printShippingDialog" fullscreen="true" >
        购货人:<span>{{orderHolder}}</span><br>
        付款日期:<span>{{product.paddtime}}</span><br>
        付款时间:<span>{{product.paddtime}}</span> <br>
        发货时间:<span>{{product.paddtime}}</span><br>
        支付方式:<span>{{payType}}</span><br>
        手机:<span>{{customer.telephone}}</span><br>
        收货地址：<span>{{customer.address}}</span><br>
        收货人:<span>{{customer.name}}</span>
        <el-table :data="order">
            <el-table-column property="orderId" label="订单编号" width="150"></el-table-column>
            <el-table-column property="product.pname" label="商品名称" width="200"></el-table-column>
            <el-table-column property="product.cargo.cargoNo" label="货号" width="200"></el-table-column>
            <el-table-column property="money" label="价格" width="200"></el-table-column>
            <el-table-column property="number" label="数量" width="200"></el-table-column>
            <el-table-column property="heji" label="小计" width="200"></el-table-column>
        </el-table>
        <el-button @click="printShippingDialog = false">确定打印</el-button>
    </el-dialog>
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                tableData: null,//表数据
                total: 0,//总条数
                pageSize: 5,//每页条数
                current: 1, // 当前页
                ordergos: null,
                myOrder:1,//选中当前
                dialogFormVisible: false,//控制对话框的显示
                printShippingDialog: false,
                printOrderDialog:false,//控制对话框的显示
                formLabelWidth: '120px', //表单标签的宽度
                orderId: null, //订单编号
                customer:{
                },
                product:{
                    cargo:''
                },
                orderHolder:{
                },
                payType:{
                },
                order: {
                },
                shipping: {
                    orderNum: '',
                    shippingNum: '',
                    shippingMethodId: '',
                    shippingTruckId: '',
                    driverId: '',
                    shippingDate: ''
                },
                logistics: null, // 所有物流信息
                vehicles: null, // 当前物流车辆信息
                numberPlate: null, // 当前车牌号
                driver: {
                    driverName: '',
                    driverControl: ''
                }, // 当前车辆司机信息
                gridData: null
            }
        },
        mounted() {
            this.loadPage(1);
        },
        methods: {
            handleSelectionChange(rows) {
                console.log(rows)
                this.orderId = rows[0].orderId;
            },
            //列表点击一行
            changeCurrent(row){
                this.myOrder = row;
                //取消所有的选择效果
                this.$refs.Table.clearSelection();
                //选中当前的行
                this.$refs. Table.toggleRowSelection(row);
            },
            //取消全选角色
            selectAll(){
                this.$refs.Table.clearSelection();
            },
            // 加载当前页
            loadPage(current) {
                axios.get("/t-order", {
                    params: {
                        current
                    }
                }).then(value => {
                    if (value.data.code == 1) {
                        this.ordergos = value.data.data.records;
                        this.current = value.data.data.current;
                        this.total = value.data.data.total;
                        this.pageSize = value.data.data.size;
                        console.log(value.data.data)
                    }
                })
            },
            showShipBox(orderId) {
                this.shipping.orderNum = orderId;
                this.dialogFormVisible = true;
                // 获取物流信息
                axios.get('/logistics1').then(value => {
                    this.logistics = value.data.data;
                });
            },
            // 获取当前物流公司车辆
            changeLogistic() {
                for (const logistic of this.logistics) {
                    if (logistic.logisticsId == this.shipping.shippingMethodId) {
                        this.vehicles = logistic.vehicles;
                        break;
                    }
                }
                this.shipping.shippingTruckId = '';
            },
            // 获取当前车辆司机信息
            changeVehicle() {
                for (const vehicle of this.vehicles) {
                    if (vehicle.vehicleId == this.shipping.shippingTruckId) {
                        this.numberPlate = vehicle.numberPlate;
                        this.shipping.driverId = vehicle.driver.driverId;
                        this.driver = vehicle.driver;
                        break;
                    }
                }
            },
            // 发货
            outGoods() {
                axios.post("/shipping",this.shipping).then(value => {
                    this.loadPage(1);
                    this.dialogFormVisible = false;
                });
            },
            printOrder(){
                axios.get('/orderById/'+this.orderId).then(value=>{
                    if (value.data.code==1){
                        this.order = value.data.data;
                        this.customer = value.data.data[0].customer
                        this.product = value.data.data[0].product
                        this.payType=value.data.data[0].payType
                        this.orderHolder=value.data.data[0].orderHolder
                        console.log("这是order");
                        console.log(this.order);
                        this.printOrderDialog = true;
                    }
                });
            },
            printShipping(){
                axios.get('/orderById/'+this.orderId).then(value=>{
                    if (value.data.code==1){
                        this.order = value.data.data;
                        this.customer = value.data.data[0].customer
                        this.product = value.data.data[0].product
                        this.payType=value.data.data[0].payType
                        this.orderHolder=value.data.data[0].orderHolder
                        this.printShippingDialog = true;
                        console.log("这是order");
                        console.log(this.order);
                    }
                });
            }
        }
    })
</script>
</body>
</html>